<template>
  <div id="homePage">
    <div class="common-layout">
      <el-container class="header">
        <el-header>
          <GlobalHeader />
        </el-header>
        <el-container class="content" style="align-items: flex-start">
          <el-aside width="204px">
            <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
              router>
              <template v-for="menuItem in menuList" :key="menuItem.index">
                <el-sub-menu v-if="menuItem.children && menuItem.children.length > 0" :index="menuItem.index"
                  @click.stop="getHightIndex(menuItem.children[0].index)">
                  <template #title>
                    <el-icon>
                      <component :is="menuItem.icon" />
                    </el-icon>
                    <span>{{ menuItem.title }}</span>
                  </template>
                  <el-menu-item v-for="child in menuItem.children" :key="child.index" :index="child.index"
                    :class="child.index === hightIndex ? 'high-style' : 'common-style'" @click="getLog(child.index)">
                    {{ child.title }}
                  </el-menu-item>
                </el-sub-menu>

                <el-menu-item v-else :index="menuItem.index">
                  <el-icon>
                    <component :is="menuItem.icon" />
                  </el-icon>
                  <span>{{ menuItem.title }}</span>
                </el-menu-item>
              </template>
            </el-menu>
          </el-aside>
          <el-main class="rightbox">
            <RouterView :demoHeaders="currentHeader" :demoData="currentData"></RouterView>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>
<script setup lang="ts">
import GlobalHeader from "@/components/layouts/GlobalHeader.vue";
import { Document, Menu as IconMenu, Location, Setting, } from "@element-plus/icons-vue";
import { computed, nextTick, ref, watch } from "vue";
import { useRoute, useRouter } from 'vue-router';

const activeIndex = ref('3')
// 菜单数据
const menuList = [
  {
    index: '1',
    title: '课程管理',
    icon: Location,
    children: [
      { index: '/test', title: 'item one' },
      { index: '1-2', title: 'item two' }
    ]
  },
  {
    index: '2',
    title: '管理员',
    icon: Location,
    children: [
      { index: 'studentForm', title: '学生管理' },
      { index: 'teacherForm', title: '教师管理' }
    ]
  },
  {
    index: '3',
    title: 'Navigator Three',
    icon: Document
  },
  {
    index: '4',
    title: 'Navigator Four',
    icon: Setting
  },
  {
    index: '5',
    title: '111',
    icon: Location,
    children: [
      { index: '5-1', title: 'item one' },
      { index: '5-2', title: 'item two' }
    ]
  }
];
// 处理点击父菜单默认高亮
const router = useRouter();
const hightIndex = ref('1')
const getHightIndex = (index: string) => {
  hightIndex.value = index
  activeIndex.value = index
  router.replace(index);
}
// 菜单打开事件
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// 菜单关闭事件
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

// 传数据给表格
type ColumnHeader = {
  prop: string;
  label: string;
  width: string;
  sortable?: boolean;
}
const demoHeaders1: ColumnHeader[] = [
  { prop: 'id', label: 'ID', width: '80', sortable: true },
  { prop: 'name', label: '姓名', width: '120' },
  { prop: 'age', label: '年龄', width: '80', sortable: true },
  { prop: 'gender', label: '性别', width: '80' },
  { prop: 'department', label: '部门', width: '150' },
  { prop: 'position', label: '职位', width: '150' },
  { prop: 'status', label: '状态', width: '100' }
]

const demoData1 = Array.from({ length: 15 }, (_, i) => ({
  id: 1000 + i,
  name: ['林', '李', '林', '赵'][i % 4] + '丹筠',
  age: 25 + (i % 10),
  gender: ['男', '女'][i % 2],
  department: ['研发部', '市场部', '人事部', '财务部'][i % 4],
  position: ['工程师', '经理', '总裁', '专员'][i % 4],
  status: ['在职', '离职', '休假'][i % 3]
}))
const demoHeaders2: ColumnHeader[] = [
  { prop: '教师id', label: 'ID', width: '80', sortable: true },
  { prop: 'name', label: '姓名', width: '120' },
  { prop: 'age', label: '年龄', width: '80', sortable: true },
  { prop: 'gender', label: '性别', width: '80' },
  { prop: 'position', label: '职位', width: '150' },
  { prop: 'status', label: '状态', width: '100' }
]
const demoData2 = Array.from({ length: 15 }, (_, i) => ({
  id: 1000 + i,
  name: ['林', '李', '林', '赵'][i % 4] + '丹筠',
  age: 25 + (i % 10),
  gender: ['男', '女'][i % 2],
  position: ['工程师', '经理', '总裁', '专员'][i % 4],
  status: ['在职', '离职', '休假'][i % 3]
}))
const currentHeader = ref<ColumnHeader[]>([])
const currentData = ref<any[]>([])
const route = useRoute();
watch(() => route.path, async (newPath) => {

  if (newPath === '/studentForm') {
    currentHeader.value = demoHeaders1;
    currentData.value = demoData1;
  } else if (newPath === '/teacherForm') {
    currentHeader.value = demoHeaders2;
    currentData.value = demoData2;
  }
  await nextTick(); // 等待下一轮 DOM 更新
}, { immediate: true });

// 打印点击的index
const getLog = (index: string) => {
  console.log("index" + index);

  console.log("activeIndex" + activeIndex.value);

}
</script>

<style>
#homePage .header {
  padding-inline: 20px;
  margin-bottom: 16px;
  color: unset;
  background: white;
}

#homePage .content {
  height: 91vh;
  background: linear-gradient(to right, #fefefe, #fff);
  margin-bottom: 28px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-left: 0;
  padding-left: 20px;
  position: relative;
  z-index: 1;
  /* 确保元素不被覆盖 */
}

#homePage .rightbox {
  height: 85vh;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  margin-left: 2px;
}

#homePage .el-button:hover {
  background-color: #1890ff;
}

#homePage .high-style {
  background-color: #e6f7ff;
  color: #1890ff;
}

#homePage.common-style {
  background-color: transparent;
  color: #333;
}
</style>
